<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>假轮播图练习</title>
<script type="text/javascript">
var n=1;//轮播总次数
var id;//定时器的ID
var imgs;
window.onload=function(){
    imgs=document.getElementsByTagName("img");
	//先把第一张显示
	imgs[0].className="show";
	//定时启动轮播
	go();
}
function go(){
	id=setInterval(function(){
		//计算要显示图片的下标
		//轮播总次数%数组长度
		var index=n%imgs.length;
		//隐藏全部图片
		for(var i=0;i<imgs.length;i++){
			//imgs[i].className="hide";
			imgs[i].setAttribute("class","hide");
		}
		//显示对的index图片
		imgs[index].className="show";
		//轮播总次数+1
		n++;
	},500);
}
function stop(){
	clearInterval(id);
}
</script>
<style type="text/css">
div{
	width: 256px;
	height: 256px;
	margin: 50px auto;
	border: 2px solid #f00;
}
.show{
	display: block;
}
.hide{
	display: none;
}
</style>
</head>
<body>
	<div onmouseover="stop();" onmouseout="go();">
		<img src="../img/08.png" class="hide">
		<img src="../img/06.png" class="hide">
		<img src="../img/13.png" class="hide">
		<img src="../img/16.png" class="hide">
		<img src="../img/15.png" class="hide">
		<img src="../img/12.png" class="hide">
		<img src="../img/14.png" class="hide">
	</div>
</body>
</html>








